﻿<div v-cloak>
    <el-row style="text-align: center">
       <el-col :span="24">
        <el-table
        :id="Math.random()"
        ref="commontable"
        :data="data"
        @selection-change="selectionChange"
        style="width: 100%"
        :height="tableHeight"
      >
        <!--多选框 -->
        <el-table-column
          v-if="showCheckBox"
          type="selection"
          align="center"
          width="55"
        >
        </el-table-column>
        <!--序号 -->
        <el-table-column
          v-if="showIndex"
          type="index"
          :index="indexMethod"
          label="序号"
        >
        </el-table-column>
        <!--声明列 -->
        <slot name="column"></slot>
        </el-table-column>
         <!--自定义操作列 -->
         <slot name="opbefore"></slot>
        <!--操作列 -->
        <el-table-column
          label="操作"
          align="center"
          v-if="showEdit ||showDelete"
          width="200"
        >
          <template slot-scope="scope">
            <el-button
              v-if="showEdit"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              v-if="showDelete"
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
        <!--自定义操作列 -->
        <slot name="opafter"></slot>
      </el-table>
       </el-col>
      </el-row>
    
      <el-row style="text-align: center">
        <el-col :span="24">
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </el-col>
      </el-row>
</div>